<template>
	<div class="card-box money-box">
		<card-title title="各市补贴金额对比"></card-title>
		<div class="ratio-box" ref="moneyBox"></div>
	</div>
</template>

<script setup>
import * as echarts from "echarts";
import { onMounted, watch } from "vue";
import { useStore } from 'vuex'

const store = useStore()

// 获取最近3个月
const getLastSixMon = () => {
	var data = new Date();
	//获取年
	var year = data.getFullYear();
	//获取月
	var mon = data.getMonth() + 1;
	var arry = new Array();
	for (var i = 0; i < 3; i++) {
		if (mon <= 0) {
		year = year - 1;
		mon = mon + 12;
		}
		mon = mon - 1;
		arry[i] = mon + '月';
	}
	return arry;
}

// let timeListData = getLastSixMon().sort()
let timeListData = ['5月', '6月', '7月', '8月', '9月', '10月']

const props = defineProps({
	list: {
		type: Array,
		default: []
	}
});

let eCharts = null;
let moneyBox = $ref(null);

watch(
	() => props.list,
	(newV, oldV) => {
		init()
	}
);

watch(
	() => store.state.currentCityCode,
	(newV, oldV) => {
		eCharts.clear()
		init('refresh')
	}
);
    

const init = (type) => {
	let option = {
		color: ["#EF863A", "#77FBEC", '#FFF100'],
		legend: {
			top: "6%",
			itemWidth: 30,
			textStyle: {
				backgroundColor: "transparent",
				color: "#fff",
				width: 50,
				fontSize: 14,
			},
		},
		tooltip: {
			trigger: "axis",
			axisPointer: {
				type: "shadow",
			},
		},
		grid: {
			left: "3%",
			right: "0%",
			bottom: "4%",
			containLabel: true,
		},
		xAxis: {
			data: timeListData,
			axisLabel: {
				// inside: true,
				color: "#fff",
				interval: 0,
				// rotate:40
			},
			axisTick: {
				show: false,
			},
			axisLine: {
				show: true,
			},
			z: 10,
		},
		yAxis: {
			axisLine: {
				show: true,
			},
			axisTick: {
				show: false,
			},
			splitLine: {
				show: false,
			},
			axisLabel: {
				color: "#fff",
			},
		},
		series: [
			{
				name: props.list[0].val1,
				data: props.list[0].val2.split(','),
				smooth: 0.6,
				type: "line",
			},
			{
				name: props.list[1].val1,
				data: props.list[1].val2.split(','),
				smooth: 0.6,
				type: "line",
			},
			{
				name: props.list[2].val1,
				data: props.list[2].val2.split(','),
				smooth: 0.6,
				type: "line",
				areaStyle: {
					color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
						{
							offset: 0,
							color: "#5597F7",
						},
						{
							offset: 1,
							color: "#5597F700",
						},
					]),
				},
			},
		],
	};

	if(!type) eCharts = echarts.init(moneyBox);
	eCharts.setOption(option);
};
</script>

<style scoped lang="scss">
@import "../../assets/css/common.scss";
.money-box {
	height: 284px;
	margin-top: 14px;
	.ratio-box {
		height: 230px;
	}
}
</style>
